<template>
    <div class="deviceInfo">
        <el-row class="device">
            <el-col :xs="2" :sm="2" :md="2" :lg="2">
                <div class="sideMenu">
                    <el-menu :default-active="currentRoute" router>
                        <el-menu-item index="/stmConfiguration/device/group">
                            <span slot="title">分组管理</span>
                        </el-menu-item>
                        <el-menu-item index="/stmConfiguration/device/info">
                            <span slot="title">设备信息</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-col>
            <el-col :xs="22" :sm="22" :md="22" :lg="22">
                <router-view></router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                currentRoute:'/stmConfiguration/device/group'   
            }
        },
        watch: {
            $route: {
                handler(newRoute) {
                    const {
                        path
                    } = newRoute
                    //路由高亮
                    this.currentRoute = path
                },
                immediate: true
            },
        },
        mounted() {

        },
        methods: {

        }
    }
</script>

<style lang="less" scoped>
    .deviceInfo {
        height: 100%;
        overflow: auto;
        .sideMenu{
            padding-top: 2px;
            height: 100%;
            /deep/ li.el-menu-item {
                font-size: 14px;
            }
            /deep/ li.el-menu-item.is-active {
                background-color: #ecf5ff;
            }
        }

        .device.el-row{
            height: 100%;
            .el-col{
                height: 100%;
            }
        }
    }
</style>